import { cssPrefix } from '../baseData';

import React from 'react';
import moment from 'moment';

class Weekdays extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    let { weekdays, shortWeekdays, veryShortWeekdays } = this.props;

    weekdays = veryShortWeekdays ? veryShortWeekdays
      : (shortWeekdays ? shortWeekdays : weekdays);

    return <div className='weekdays-list'>
      {
        weekdays.map((item, index)=>{
          return <span key={index} className='date-item weekdays'>{item}</span>
        })
      }
    </div>
  }
}

class Day extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    let { date, preMonthDays, week, index, year, month, cDay, monthDays, minDateValue, maxDateValue, parent, changeDate, type } = this.props,
      className = 'date-item month-day',
      day = '',
      dateValue = '',
      NM = parent.state.NM,
      m = parent.state.m,
      isDisable = false;

    if(index < week){ // 前一个月
      day = preMonthDays - (week - index) + 1;
      className += ' other-month-day prev-month-day';
      dateValue = moment(date).year(year).month(month-1).date(day).valueOf()
    }else if( index >= (monthDays + week) ){ // 后一个月
      day = NM;
      parent.state.NM += 1;
      className += ' other-month-day next-month-day';
      dateValue = moment(date).year(year).month(month+1).date(day).valueOf();
    }else{
      day = m;
      parent.state.m += 1;
      dateValue = moment(date).year(year).month(month).date(day).valueOf();
      if(day == cDay){
        className += ' selected-day'
      }
    }

    if((!!minDateValue && minDateValue > dateValue) || (!!maxDateValue && maxDateValue < dateValue)){
      className += ' disable-day';
      isDisable = true;
    }

    // 循环结束，复原 NM 和 m
    if(index >= 41){
      parent.state.NM = 1;
      parent.state.m = 1;
    }

    return <li className={className} onClick={changeDate && changeDate.bind(this, dateValue, isDisable, type)}><span>{day}</span></li>
  }
}

class Days extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      NM: 1,
      m: 1
    }
  }
  render(){
    let days = new Array(42).fill(0),
      props = {
        ...this.props,
        parent: this,
      };
    return <ul className='date-list'>
      {
        days.map((item,index)=>{
          return <Day key={index} {...props} index={index} />
        })
      }
    </ul>
  }
}

class CreateTimeOption extends React.Component{
  render(){
    let arr = new Array(this.props.len);
    arr.fill(0);
    return arr.map((item, index)=>{
      return <option key={index} value={index}>{index}</option>
    })
  }
}

class TimePick extends React.Component{

  render(){
    let { date, changeTime, type } = this.props,
      time = date.split(' ')[1],
      hour = time ? time.split(':')[0] : 0,
      minute = time ? time.split(':')[1] : 0,
      second = time ? time.split(':')[2] : 0;
    return <div className={`${cssPrefix}datepicker-time-wrap`}>
      <select className='form-control' value={parseInt(hour)} onChange={changeTime.bind(this, 'hours', type)}>
        <CreateTimeOption len={24} />
      </select>
      <span>:</span>
      <select className='form-control' value={parseInt(minute)} onChange={changeTime.bind(this, 'minutes', type)}>
        <CreateTimeOption len={61} />
      </select>
      <span>:</span>
      <select className='form-control' value={parseInt(second)} onChange={changeTime.bind(this, 'seconds', type)}>
        <CreateTimeOption len={61} />
      </select>
    </div>
  }
}

class MonthPick extends React.Component{
  render(){
    let { date, year, month, minDateValue, cMinDateValue, maxDateValue, cMaxDateValue, changeMonth, type } = this.props,
      prevDisable = minDateValue && minDateValue >= cMinDateValue,
      nextDisable = maxDateValue && maxDateValue <= cMaxDateValue;


    return <div className={`${cssPrefix}datepicker-month-wrap`}>
      <span
        className={`${cssPrefix}datepicker-prev-month ${prevDisable ? 'disable-month' : ''}`}
        onClick={changeMonth.bind(this, prevDisable, month-1, type)}
      ></span>
      <span className={`${cssPrefix}datepicker-year`}>{year}年</span>
      <span className={`${cssPrefix}datepicker-month`}>{moment(date).format('M')}月</span>
      <span
        className={`${cssPrefix}datepicker-next-month ${nextDisable ? 'disable-month' : ''}`}
        onClick={changeMonth.bind(this, nextDisable, month+1, type)}
      ></span>
    </div>
  }
}

class Date extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      date: props.date,
    }
  }

  addProps(){
    let { date, minDate, maxDate } = this.props,
      cMoment = moment(date),
      year = cMoment.year(),
      month = cMoment.month(),
      monthDays = cMoment.daysInMonth(),
      week = parseInt(moment([year, month, 1]).format('e')); // 这个月的第一天是周几

    return{
      year,
      month,
      cDay: cMoment.date(),
      monthDays, // 每个月天数
      week: week <= 1 ? (week + 6) : week, // 这个月的第一天是周日或是周一，则日历第一行显示上个月的日期
      preMonthDays: moment().year(year).month(month - 1).daysInMonth(), // 前一个月天数
      minDateValue: minDate ? moment(minDate).valueOf() : '',
      maxDateValue: maxDate ? moment(maxDate).valueOf() : '',
      cMinDateValue: moment().year(year).month(month).date(1).valueOf(),
      cMaxDateValue: moment().year(year).month(month).date(monthDays).valueOf(),
    }
  }

  change(name, e){
    this.setState({
      [name]: e.target.value
    })
  }

  componentWillReceiveProps(props){
    this.setState({
      date: props.date
    })
  }

  render(){
    let { date } = this.state,
      { dateLayerInput, hasTimePicker, hasMonthPicker, dateInputBlur, type } = this.props,
      otherProps = this.addProps();
    return <div className='date-wrap'>
      {
        dateLayerInput && <div className={`${cssPrefix}datepicker-date`}>
          <input value={date} onBlur={dateInputBlur.bind(this, type)} onChange={this.change.bind(this, 'date')} />
        </div>
      }
      {
        hasTimePicker && <TimePick {...this.props} />
      }
      {
        hasMonthPicker && <MonthPick {...this.props} {...otherProps} />
      }
      <Weekdays {...this.props}/>
      <Days {...this.props} {...otherProps} />
    </div>
  }
}


module.exports = {
  Date,
  Weekdays,
  Days
}